<!DOCTYPE html>
<html lang="zh">
<head th:replace="/admin/fragments/common :: head('订单管理')">
    <title></title>
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.min.css">
    <script src="/plugin/jquery-3.7.1.min.js"></script>
    <script src="/plugin/adminlte/js/popper.min.js"></script>
    <script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugin/axios.min.js"></script>
</head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary app-loaded sidebar-open"
      onload="grabDataFromServer(1)">
<div class="app-wrapper">
    <main class="app-main">
        <div th:replace="/admin/fragments/common :: appContentHeader('订单管理')"></div>
        <div class="app-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-auto">
                        <label for="foodid" class="visually-hidden">菜品名称</label>
                        <input type="text" class="form-control" id="foodid" placeholder="菜品名称">
                    </div>
                    <div class="col-auto">
                        <label for="lowPrice" class="visually-hidden">最低价</label>
                        <input type="text" class="form-control" id="lowPrice" placeholder="最低价">
                    </div>
                    <div class="col-auto">
                        <label for="hiPrice" class="visually-hidden">最高价</label>
                        <input type="text" class="form-control" id="hiPrice" placeholder="最高价">
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-primary mb-3" onclick="grabDataFromServer(1)">查询</button>
                    </div>
                </div>
                <table id="data_table" class="table table-striped">
                    <!--此处填充数据-->
                </table>
                <ul class="pagination" id="pager">
                    <!-- 此处填充分页数据 -->
                </ul>
            </div>
        </div>
    </main>
    <script>
        function grabDataFromServer(page) {
            axios.get("/api/admin/orderList", {
                params: {
                    foodid: document.getElementById('foodid').value,
                    lowPrice: document.getElementById('lowPrice').value,
                    hiPrice: document.getElementById('hiPrice').value,
                    page: page,
                    size: 10
                }
            }).then(res => {
                bindTableData(res); // 绑定表格数据
                bindPager(res); // 绑定分页控件
            })
        }

        function bindTableData(res) {
            let html = `
                     <tr>
                         <th>订单序号</th>
                         <th>菜品序号</th>
                         <th>价格</th>
                         <th>用户名</th>
                         <th>操作</th>
                     </tr>
                 `;
            let orders = res.data.records;
            for (let x in orders) {
                let s = orders[x]; // 每次循环获取一个景点对象
                html += `
                         <tr>
                             <td>${s.orderid}</td>
                             <td>${s.foodid}</td>
                             <td>${s.price}</td>
                             <td>${s.userid}</td>
                             <td>
                                 <a href="/admin/orderDetail?id=${s.id}" class="btn btn-success btn-sm">查看详情</a>
                             </td>
                         </tr>
                     `;
            }
            document.getElementById("data_table").innerHTML = html;
        }

        function bindPager(res) {
            const totalPages = res.data.pages;
            const current = res.data.current;
            let pager_html = '';
            for (let i = 1; i <= totalPages; i++) {
                if (i === current) {
                    pager_html += '<li class="page-item active">';
                } else {
                    pager_html += '<li class="page-item">';
                }
                pager_html += `<a class="page-link" href="javascript:void(0)" onclick="grabDataFromServer(${i})">${i}</a></li>`;
            }
            document.getElementById("pager").innerHTML = pager_html;
        }
    </script>
</div>
</body>
</html>